<template>
  <div class="NavMenu">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#2c3e50"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
      router
      style="width: 201px;height: 100%"
    >
      <el-menu-item index='/home' style="text-align: left">
        <i class="el-icon-s-home"></i>
        <span>数据显示</span>
      </el-menu-item>
      <el-menu-item index='/predict' style="text-align: left">
        <i class="el-icon-s-home"></i>
        <span>预测</span>
      </el-menu-item>

      <!--      <el-menu-item index="/systemOverview" style="text-align: left">-->
      <!--        <template slot="title">-->
      <!--          <i class="el-icon-s-data"></i>-->
      <!--          <span>系统总览</span>-->
      <!--        </template>-->
      <!--      </el-menu-item>-->

      <!--      <el-menu-item index="/multiDeviceOverview" style="text-align: left">-->
      <!--        <template slot="title">-->
      <!--          <i class="el-icon-s-order"></i>-->
      <!--          <span>多设备概览</span>-->
      <!--        </template>-->
      <!--      </el-menu-item>-->

      <!--      <el-menu-item index="/faultWarning" style="text-align: left">-->
      <!--        <template slot="title">-->
      <!--          <i class="el-icon-bell"></i>-->
      <!--          <span>故障预警</span>-->
      <!--        </template>-->
      <!--      </el-menu-item>-->

      <!--      <el-menu-item index="/faultAlarm" style="text-align: left">-->
      <!--        <template slot="title">-->
      <!--          <i class="el-icon-message-solid"></i>-->
      <!--          <span>故障报警</span>-->
      <!--        </template>-->
      <!--      </el-menu-item>-->

      <!--      <el-submenu index="1" style="text-align: left">-->
      <!--        <template slot="title">-->
      <!--          <i class="el-icon-s-tools"></i>-->
      <!--          <span>故障诊断系统</span>-->
      <!--        </template>-->
      <!--        <el-menu-item index="/faultDiagnosis" style="text-align: center">-->
      <!--          故障诊断-->
      <!--        </el-menu-item>-->
      <!--      </el-submenu>-->

      <!--      <el-menu-item index="/maintenanceAdvice" style="text-align: left">-->
      <!--        <template slot="title">-->
      <!--          <i class="el-icon-s-opportunity"></i>-->
      <!--          <span>维护建议</span>-->
      <!--        </template>-->
      <!--      </el-menu-item>-->

    </el-menu>
  </div>
</template>

<script>
  export default {
    name: "Menu",
    methods: {
      handleSelect(index) {
        // console.log(index)
      },
    }
  }
</script>

<style scoped>
  .el-menu-vertical-demo {
    position: fixed;
    z-index: 1000;

  }
</style>
